Testing JS in Rmd

// javascript code goes here

$('<div id="chunkBody"></div>').insertAfter(".foldable");
$("#chunkBody").append('<div id = "map"></div>');
$("#map").append('<div class = "sliderContainer"></div>');
$("#map").append('<div id = "barPlot"></div>');
$(".sliderContainer").append('<div class = "sliderContent"></div>');
$(".sliderContent").append('<p style="margin-bottom:7px; font-size:16px; font-weight: 500;"> <span id="sliderValue"></span> </p>');
$(".sliderContent").append('<input id="sliderRange" class="slider" type="range" min="0" max="33" value="0" step="1"></input>');
$(".sliderContent").append('<p style="text-align:left; margin-bottom: 0em; font-weight: 300; margin-top: 5px"> July 2019 - <span style="float:right"> - April 2022 </span> </p>');

var slider = document.getElementById("sliderRange");
var sliderValue = document.getElementById("sliderValue");

const yymm = ['July 2019', 'August 2019', 'September 2019', 'October 2019', 'November 2019', 'December 2019',
              'January 2020', 'February 2020', 'March 2020 (First Covid-19 case in US)', 'April 2020', 'May 2020', 'June 2020',
              'July 2020', 'August 2020', 'September 2020', 'October 2020', 'November 2020', 
              'December 2020 (Vaccination started)',
              'January 2021', 'February 2021', 'March 2021', 'April 2021', 'May 2021', 'June 2021',
              'July 2021', 'August 2021', 'September 2021', 'October 2021', 'November 2021', 'December 2021',
              'January 2022', 'February 2022', 'March 2022', 'April 2022']

const yymm2 = ['2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12',
              '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06',
              '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12',
              '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06',
              '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12',
              '2022-01', '2022-02', '2022-03', '2022-04']

sliderValue.innerHTML = yymm[slider.value]; // Display the default slider value

var page_width = $("#map").width()
var width = page_width
var height = page_width*0.7

d3.select("#map")
  .style("width", width + "px")
  .style("height", height + "px");

mapboxgl.accessToken = 'pk.eyJ1IjoidWh3YW5nMyIsImEiOiJja3d0bGh4cG8wemxtMm5xcTJ1anc4ajlxIn0.GPUcPfwoUXy6pItqRUvifw';
var map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/uhwang3/cl65mb11m001q15lcdpvr8efm',
    center: [-84.709340, 33.798925], // starting position [lng, lat]
    zoom: 8.5 // starting zoom
});

const colors = ['#213E9A','#551EAD','#C019BD','#D31256','#E6470A','#F9E200'];
//const colors = ['#0198BD','#49E3CE','#D8FEB5','#FEEDB1','#FEAD54','#D1374E'];

map.on('load', () => {
  map.addSource('visit_monthly',  {type: 'vector', url: "mapbox://uhwang3.visit_monthly" });
  map.addLayer(
    {
      'id': 'visit_monthly',
      'type': 'circle',
      'source': 'visit_monthly',
      'source-layer': 'visit_monthly',
      'paint': {
        'circle-color': {
          'property' : '2019-07',
          'stops': [[0, colors[0]], [20, colors[1]], [50, colors[2]], [200, colors[3]], [400, colors[4]], [800, colors[5]]]
        },
        'circle-radius': 1.5
      }
    },
  );
})

slider.addEventListener('input', (sr) => {
  //update the printed slider value
  sliderValue.innerHTML = yymm[sr.target.value];

  map.setPaintProperty(
    'visit_monthly', 'circle-color', {
      'property' : yymm2[sr.target.value],
      'stops': [[0, colors[0]], [20, colors[1]], [50, colors[2]], [200, colors[3]], [400, colors[4]], [800, colors[5]]]
    }
  )
})

Promise.all([d3.csv("../data/visit_summary.csv", function (d) {
  return d3.autoType(d)})])
  .then(function(data) {
    ready(data[0])
    }
  )

function ready(data){

  console.log(data)

  var trace1 = {
    x: [data[0]['food_type'],data[1]['food_type'],data[2]['food_type'],data[3]['food_type']],
    y: [data[0]['2019-07'],data[1]['2019-07'],data[2]['2019-07'],data[3]['2019-07']],
    name: 'Take-out',
    type: 'bar'
  };

  var trace2 = {
    x: [data[4]['food_type'],data[5]['food_type'],data[6]['food_type'],data[7]['food_type']],
    y: [data[4]['2019-07'],data[5]['2019-07'],data[6]['2019-07'],data[7]['2019-07']],
    name: 'Dine-in',
    type: 'bar'
  };

  var plotData = [trace1, trace2];

  var layout = {barmode: 'stack',
              paper_bgcolor: 'rgba(0,0,0,0)',
              plot_bgcolor: 'rgba(0,0,0,0)',
              colorway: ['#0198BD','#D8FEB5'],
              font: {
                color: 'white',
                family: 'Raleway'
              },
              legend: {
                font: {
                  color: 'white',
                  family: 'Raleway'
                }
              }};

  Plotly.newPlot(barPlot, plotData, layout);
}

print(1+1)

## [1] 2